<template>
  <div id="vmMonitor" class="div-vm-monitor">
<!--    <el-tooltip class="item" effect="dark" placement="left" style="float:right;margin-right:2%">-->
<!--      <div v-html="tip" slot="content" style="font-size: 16px"></div>-->
<!--      <i style="color:grey" class="el-icon-info help-info">提示</i>-->
<!--    </el-tooltip>-->
    <iframe id="monitor-iframe-id" :src="monitorSrcUrl" width="100%"  style="border-width: 0px; overflow-y: hidden; scrolling: no;min-height: 97vh " ></iframe>
  </div>
</template>

<script>
import local from './local'
import $ from 'jQuery'
export default {
  name: 'VmMonitor',
  props: ['vmId', 'platformResourceId'],
  i18n: {
    messages: local
  },
  data() {
    return {
      pageHeight: 500,
      monitorSrcUrl: '',
      ocAdress: ''
    }
  },
  mounted() {
    this.pageHeight = window.innerHeight - 150
    window.onresize = () => {
      return (() => {
        this.pageHeight = window.innerHeight - 150
      })()
    }
    this.getOcAdress()
  },
  beforeDestroy() {
  },
  methods: {
    getOcAdress() {

      var iframe = document.getElementById('monitor-iframe-id')
      iframe.src = '/kt2/index.html'

      // fetchList('/cloud/v1.0/vms/-1/snmpInfo', {}).then(({ data }) => {
      //   this.ocAdress = data.ocAdress
      //   this.getMonitorURL()
      // }).catch((error) => {
      //   this.$message({ type: 'error', message: error.msg, duration: 5000 })
      // })
    },
    getMonitorURL() {
      // 此处所有所需参数，待与OC打通后，从OC获取
      const TOKEN = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyTmFtZSI6ImFkbWluIn0.SAx8sRejROTvxSydMhbuB2SUOzLLXCDPGAVOL-aGuLY'
      // let OC_URL =  'http://10.4.79.34:8080/aclome';
      const OC_URL = this.ocAdress
      const MONITOR_URL = '/acl_physical_host_view/pages/newAbstract/index.jsp'
      // let resourceId = '8a84cfa271ecc8780171ed29b1722d0a.6f3430aab56802dca168c8fab96f6c30';
      // let resTypeId = 'HOST_LINUX';
      // var _start = resTypeId.indexOf("_")+1;
      // var _end = resTypeId.length;
      // let resourceType = resTypeId.substr(_start, _end);
      // let driverName = 'HOST';
      // let workspaceId = resTypeId + "MonitorWorkspace";
      // let _url = OC_URL + MONITOR_URL + '?resourceId='+resourceId+ '&resourceTypeId='+resTypeId
      //           +'&resourceType='+resourceType+'&driverName='+driverName+'&workspaceId='+workspaceId + '&token=' + TOKEN;
      const _url = OC_URL + MONITOR_URL + '?inventoryId=' + this.platformResourceId + '&token=' + TOKEN
      this.monitorSrcUrl = _url
      // document.cookie = 'SameSite=None; Secure=true'
      var iframe = document.getElementById('monitor-iframe-id')
      iframe.src = _url
      // iframe.contentWindow.onerror = function() {
      //   alert('errr')
      //   console.log('errrr')
      // }
      // iframe.addEventListener('load', function() {
      //   // 代码能执行到这里说明已经载入成功完毕了
      //   alert('ok')
      //   this.removeEventListener('load', arguments.call, false)
      //   // 这里是回调函数
      // }, false)
    }
  },
  computed: {
    tip() {
      return '如果使用chrome浏览器发生跨域问题，请按以下方式进行配置：<br/>\
        chrome浏览器中搜索下面地址：<br/>\
        chrome://flags/#same-site-by-default-cookies <br/>\
        chrome://flags/#cookies-without-same-site-must-be-secure <br/>\
        这两项设置为Disabled，并重启浏览器'
    }
  }
}
</script>

<style lang="scss" scoped>
.div-vm-monitor{
  width: 100%;
}
</style>
